<template>
	<view class="message_box">
		<view class="list_box flex w100">
			<view class="list_con" @click="gotoPage(1)">
				<image class="w100 wuliu" src="../../static/index/message/wuliu.png"></image>
				<uni-badge style="position: relative; top: -120upx; left: -30upx" size="small" :text="5" absolute="rightTop" type="error"></uni-badge>
				<view class="list_txt family f500">交易物流</view>
			</view>
			<view class="list_con" @click="gotoPage(2)">
				<image class="w100 wuliu" src="../../static/index/message/xinxi.png"></image>
				<uni-badge style="position: relative; top: -120upx; left: -30upx" size="small" :text="5" absolute="rightTop" type="error"></uni-badge>
				<view class="list_txt family f500">我的信息</view>
			</view>
			<view class="list_con" @click="gotoPage(3)">
				<image class="w100 wuliu" src="../../static/index/message/tongzhi.png"></image>
				<uni-badge style="position: relative; top: -120upx; left: -30upx" size="small" :text="5" absolute="rightTop" type="error"></uni-badge>
				<view class="list_txt family f500">系统通知</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		gotoPage(n) {
			uni.navigateTo({
				url: `/pages/index/messageDetail?type=${n}`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.message_box {
	overflow: hidden;
	.list_box {
		margin-top: 82upx;
		.list_con {
			width: 142upx;
			margin-left: 82upx;
			.wuliu {
				height: 141upx;
			}
			.list_txt {
				font-size: 26upx;
				color: #333333;
				text-align: center;
			}
		}
	}
}
</style>
